<template>
  <div class="attendance">
    <div class="punch-entry">
      <van-button type="primary" block @click="$router.push('/attendance-punch')">
        去打卡
      </van-button>
    </div>

    <div class="month-selector">
      <van-cell-group>
        <van-cell 
          :title="selectedMonth + '月'" 
          is-link 
          @click="showMonthPicker = true" 
        />
      </van-cell-group>
    </div>

    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
      <template v-if="loading">
        <van-loading class="loading" type="spinner" />
      </template>
      <template v-else>
        <template v-if="attendanceList.length">
          <attendance-item 
            v-for="(item, index) in attendanceList" 
            :key="index"
            :item="item"
          />
        </template>
        <van-empty v-else description="暂无考勤记录" />
      </template>
    </van-pull-refresh>

    <van-popup v-model="showMonthPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="monthOptions"
        @confirm="onMonthConfirm"
        @cancel="showMonthPicker = false"
        title="选择月份"
      />
    </van-popup>
  </div>
</template>

<script>
import AttendanceItem from '@/components/AttendanceItem.vue'

function api(month) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        array: [
          {
            date: `${String(month).padStart(2, '0')}月30日(星期一)`,
            signInTime: '08:35:01',
            signOutTime: '',
            duration: '0小时'
          },
          {
            date: `${String(month).padStart(2, '0')}月29日(星期日)`,
            signInTime: '08:35:01',
            signOutTime: '19:35:01',
            duration: '11小时'
          }
        ]
      })
    }, 1000)
  })
}

export default {
  name: 'Attendance',
  components: {
    AttendanceItem
  },
  data() {
    return {
      showMonthPicker: false,
      selectedMonth: new Date().getMonth() + 1,
      monthOptions: this.generateMonthOptions(),
      attendanceList: [],
      isRefreshing: false,
      loading: false
    }
  },
  methods: {
    generateMonthOptions() {
      const options = []
      const currentDate = new Date()
      const currentMonth = currentDate.getMonth()
      const currentYear = currentDate.getFullYear()

      for (let i = 0; i < 12; i++) {
        let month = currentMonth - i
        let year = currentYear
        
        if (month < 0) {
          month += 12
          year -= 1
        }

        options.push({
          text: `${year}年${month + 1}月`,
          value: month + 1
        })
      }

      return options
    },
    async loadAttendanceData() {
      this.loading = true
      try {
        const response = await api(this.selectedMonth)
        this.attendanceList = response.array || []
      } catch (error) {
        console.error('加载考勤数据失败:', error)
        this.$toast('加载失败，请重试')
      } finally {
        this.loading = false
        this.isRefreshing = false
      }
    },
    async onRefresh() {
      this.attendanceList = []
      await this.loadAttendanceData()
    },
    async onMonthConfirm(value) {
      this.selectedMonth = value.value
      this.showMonthPicker = false
      this.attendanceList = []
      await this.loadAttendanceData()
    }
  },
  created() {
    this.loadAttendanceData()
  }
}
</script>

<style scoped>
.attendance {
  padding: 10px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.punch-entry {
  padding: 16px;
  background: #fff;
  margin-bottom: 10px;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
</style> 